import React, { Component } from 'react';
import {
  Table,
  Pagination,
  Dialog,
  Button,
  Icon,
  Grid,
  Select,
  Search,
} from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import ChooseHead from '../chooseHead';
import PageHead from '../../../../components/PageHead';
import './index.scss';
import { getLocalTime } from '../../../../utils/localTime';
import service from '../../../../utils/service';
import api from '../../../../utils/api.js';

const { Row, Col } = Grid;

@withRouter
export default class goodList extends Component {
  state = {
    page: 1,
    isLoading: true,
    filterData: {}, // 删选条件
    payList: [], // 付款列表
    purDetailList: [], // 每单详情列表
    countPage: 1, // 总页数
    perPage: 10, // 每页数据量
    filterData: {
      search: '',
      start_time: '',
      end_time: '',
    }, // 筛选条件
    Dvisible: false, // 详情弹窗
    payFormData: {
      price: '', // 付款金额
      remarks: '', // 备注
    },
    p_id: '', // 单子ID
    s_id: '', // 供应商ID，我也不知道为什么加上它
  };

  // 获取采购付款记录
getPayList= () => {
  service({
    method: 'get',
    url: api.PayRecord,
    params: {
      search: this.state.filterData.search,
      start_time: this.state.filterData.start_time,
      end_time: this.state.filterData.end_time,
      page: this.state.page || 1,
    },
  })
    .then((res) => {
     
      const payList = res.data.list;
      payList.forEach((item) => {
        item.payment_time = getLocalTime(item.payment_time);
      });
      const countPage = res.data.count_page;
      this.setState(
        {
          payList,
          countPage,
          isLoading:false,
        }
      );
    });
}
 
 componentDidMount() {
   this.getPayList();
 }


  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading:true,
      },
      () => {
        this.getPayList();
      }
    );
  };

  handleFilterChange = (value) => {
    let start_time = '';
    let end_time = '';
    if (value.time) {
      if (value.time[0]) {
        start_time = new Date(value.time[0].toLocaleString()).toLocaleDateString();
      }
      if (value.time[1]) {
        end_time = new Date(value.time[1].toLocaleString()).toLocaleDateString();
      }
    }
    this.setState(
      {
        filterData: {
          search: value.search || '',
          start_time,
          end_time,
        },
        page: 1,
        isLoading: true,
      }, () => {

        this.getPayList();
      }
    );
  };

  handleDetail = (record) => {
  
    this.setState(
      {
        p_id: record.p_id,
      }, () => {
        this.getSingleData();
      }
    );
  };
  onClose = () => {
    this.setState(
      {
        Dvisible: false,
      }
    );
  }
  handleDownload = () => {
    window.location.href = `${api.PayRecord}?excel=1&&start_time=${this.state.filterData.start_time}&end_time=${this.state.filterData.end_time}&search=${this.state.filterData.search}`;
  }
  // renderOper = (value, index, record) => {
  //   return (
  //     <div>
  //       <a style={styles.link.detail} onClick={() => { this.handleDetail(record); }}>
  //         详情
  //       </a>
  //     </div>
  //   );
  // };

  render() {
    const { isLoading, payList, page, perPage, countPage, purDetailList } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead filterChange={this.handleFilterChange} />
        <PageHead title="付款记录列表" buttonText="导出Excel" onClick={this.handleDownload} />
        <IceContainer style={{paddingBottom:'0'}}>
          <Table loading={isLoading} dataSource={payList} hasBorder={false}>
            <Table.Column title="所付供应商" dataIndex="name" />
            <Table.Column title="付款时间" dataIndex="payment_time" />
            <Table.Column title="付款金额" dataIndex="price" />
            <Table.Column title="备注" dataIndex="remarks" />
            {/* <Table.Column title="操作" cell={this.renderOper} /> */}
          </Table>
        </IceContainer>
        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={countPage * perPage}
        />
        {/* 弹窗 */}
        {/* <Dialog
           id="DDialog"
           visible={this.state.Dvisible}
           footerActions={[]}
           style={{ marginTop: '25px' }}
           onClose={this.onClose}
           footerAlign="center"
           footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn SubBtn">确定</Button></div>}
         >
           <div>
            <h3 className="titleWrap"><span className="dialogTitle">详细信息</span></h3>
            <IceContainer className="dialogContent" style={{ width: '1200px' }}>
              <Table loading={isLoading} dataSource={purDetailList} hasBorder={false} maxBodyHeight="600">
                <Table.Column title="商品条码" dataIndex="goods_bar_code" />
                <Table.Column title="商品名称" dataIndex="goods_name" />
                <Table.Column title="型号" dataIndex="model" />
                <Table.Column title="色号/膜层" dataIndex="color_layer" />
                <Table.Column title="数量" dataIndex="stock" />
                <Table.Column title="零售价" dataIndex="retail_price" />
                <Table.Column title="进货价" dataIndex="buying_price" />
                <Table.Column title="镜片类型" dataIndex="lens_type" />
                <Table.Column title="折射率" dataIndex="refractivity" />
                <Table.Column title="屈光度" dataIndex="diopter" />
                <Table.Column title="散光度" dataIndex="astigmatism" />
                <Table.Column title="折扣" dataIndex="rebate" />
                <Table.Column title="生产批号" dataIndex="batch_number" />
                <Table.Column title="到期日期" dataIndex="due_time" />
                {/* <Table.Column title="操作" cell={this.renderOper} /> */}
              {/* </Table>
            </IceContainer>
          </div>
         </Dialog> */} 
        
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    width: '140px',
    height: '40px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    pay: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
};
